<template>
	<view>
		<f-navbar title=" " fontColor="#303133" transparentTitleColor="#fff" bgColor="#fff" :scrollTop="scrollTop" navbarType='5'></f-navbar>
		<view class="topBox">
			<!-- <image @click="back" class="back" src="/static/index/back.png" mode=""></image> -->
			<view class="swiperBox">
				
				<u-swiper :list="list" height="750rpx" keyName="image" radius="0"></u-swiper>
			</view>
			
		</view>
		<view class="centerBox">
			<view class="top">
				<view class="l">
					<image src="/static/index/build.png" mode=""></image>
					<text>极速上门</text>
				</view>
				<view class="r">随叫随到 · 优质服务 · 平台保障</view>
			</view>
			<view class="bottom">
				<view class="b_top">
					<view class="shang">
						<text>{{info.name}}</text>
						<!-- <view class="vip"><text>¥ {{info.price}}</text></view> -->
					</view>
					<view class="xia">
						<view class="btn">{{info.intro}}</view>
					</view>
					<image class="detailsBg2" src="/static/index/detailsBg2.png" mode=""></image>
				</view>
				<view class="b_cen">
					<view class="box">
						<text class="num red">{{info.price}}</text>
						<text>售价/元</text>
					</view>
					<view class="box">
						<text class="num">{{info.costmin}}</text>
						<text>分钟/时长</text>
					</view>
					<view class="box">
						<text class="num">{{info.sale}}</text>
						<text>单/销量</text>
					</view>
				</view>
				<!-- <view class="b_bot"@click="$goto('/pages_my/openVip/openVip')">
					<view class="l">
						<image src="/static/index/crown.png" mode=""></image>
						<text>一点会员</text>
					</view>
					<view class="r">
						<text>开通享会员价</text>
						<image class="crown" src="/static/index/vector.png" mode=""></image>
					</view>
				</view> -->
			</view>
		</view>
		<view class="flow_path_box">
			<view class="top">
				<view class="l">
					<text>服务流程</text>
				</view>
				<view class="r">
					<text>实名认证</text>
					<image src="/static/index/right_green.png" mode=""></image>
					<text>爽约包赔</text>
					<image src="/static/index/right_green.png" mode=""></image>
					<text>超时秒退</text>
				</view>
			</view>
			<!-- <view class="bottom">
				<view class="item" v-for="(i,idx) in flowPathList" :key="idx">
					<view class="l">
						<image :src="i.icon" mode=""></image>
						<view class="text">
							<text>{{i.name}}</text>
							<text>{{i.text}}</text>
						</view>
					</view>
					<text class="number">0{{idx+1}}</text>
				</view>
				<u-empty mode="list" v-if="finish && list.length === 0" style="margin-top: 200rpx;" icon="/static/none.png">
						</u-empty>
			</view> -->
		</view>
		<view class="details_box1">
			<image  v-for="i in bu_images" :src="$oss(i)" mode="widthFix"></image>
		</view>
		<view class="details_box">
			<view class="top">项目详情</view>
			<!-- <view v-if="infoa" class="bottom" v-html="infoa">
			</view>
			<image v-else v-for="i in service_images" :src="$oss(i)" mode=""></image> -->
			
			<image v-if="service_images" v-for="i in service_images" :src="$oss(i)" mode="widthFix"></image>
			<view v-else class="bottom" v-html="infoa">
			</view>
		</view>
		<view class="details_box">
			<view class="top">下单说明</view>
			<!-- <view v-if="infob" class="bottom" v-html="infob">
			</view>
			<image v-else v-for="i in dan_images" :src="$oss(i)" mode=""></image> -->
			
			<image v-if="dan_images" v-for="i in dan_images" :src="$oss(i)" mode="widthFix"></image>
			<view v-else class="bottom" v-html="infob">
			</view>
		</view>
		<view class="bottom_btn">
			<view class="btn" @click="toSelectTechnician">下单选择技师</view>
		</view>
	</view>
</template>

<script>
	import configs from '../../common/config.js'
export default {
	data() {
		return {
			flowPathList:[
				{
					name:'选择服务',
					text:'根据您的需要，来选择服务套餐',
					icon:'/static/index/icon1.png'
				},
				{
					name:'在线下单',
					text:'选择想要的技师后，付款下单',
					icon:'/static/index/icon2.png'
				},
				{
					name:'预约上门',
					text:'付款完成后，选择上门服务时间',
					icon:'/static/index/icon3.png'
				},
				{
					name:'专业服务',
					text:'确定服务时间后，请耐心等待上门',
					icon:'/static/index/icon4.png'
				}
			],
			id: '',
			info: '',
			infoa: '',
			infob: '',
			scrollTop:'',
			list: [],
			finish:false,
			service_images:[],
			dan_images:[],
			bu_images:[]
		};
	},
	onLoad(option) {
		this.id = option.id
		this.getInfo()
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	methods: {
			oss(url){
			if (!url) {
				return ''
			}
			if (typeof url === 'string') {
				if ((/^(http|https):\/\/.+/.test(url))) {
					return url
				} else if ((/^(data:image).+/.test(url))) {
					return configs.baseUrl + uni.getStorageSync('project').user_logo_image
				} else{
					return configs.baseUrl + url
				}
			} else {
				let arr = []
				for (let i = 0; i < url.length; i++) {
					if ((/^(http|https):\/\/.+/.test(url[i]))) {
						arr.push(url[i])
					} else {
						arr.push(configs.baseUrl + url[i])
					}
				}
				return arr
			}
		},
		getInfo(){
			this.$api.post('/cateinfo', {
				id: this.id
			}).then(res => {
				this.service_images = res.data.service_images.split(',')
				this.dan_images = res.data.dan_images.split(',')
				this.bu_images = res.data.bu_images.split(',')
				this.info = res.data;
				this.list = res.data.images.map((value) => {
					return {
						image: this.$oss(value)
					}
				});
				if(this.list.length<1){
					this.finish = true
				}
				res.data.content = res.data.content.replace(/<img/g,
					"<img style='max-width:100% !important;height:auto !important'");
				res.data.ordercontent = res.data.ordercontent.replace(/<img/g,
					"<img style='max-width:100% !important;height:auto !important'");
				this.infoa = res.data.content;
				this.infob = res.data.ordercontent;
			}).catch((res) => {
			
			})
		},
		back() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		toDetails() {
			uni.navigateTo({
				url: '/pages_index/details/details'
			});
		},
		toSelectTechnician(){
			uni.navigateTo({
				url: '/pages/selectTechnician/selectTechnician?id='+this.id
			})
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background: #f7f7fa;
	padding-bottom: 220rpx;
}
.topBox {
	width: 750rpx;
	position: relative;
	.swiperBox{
		width: 750rpx;
		height: 750rpx;
		position: relative;
		
	}
	.back {
		position: absolute;
		left: 32rpx;
		top: var(--status-bar-height);
		padding-top: 30rpx;
		width: 64rpx;
		height: 64rpx;
		z-index: 10;
	}
	
}
.centerBox {
	width: 686rpx;
	margin: -100rpx auto 0;
	background: #00ce9b;
	border-radius: 20rpx;
	position: relative;
	.top {
		font-size: 30rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx;
		.l {
			display: flex;
			align-items: center;
			image {
				width: 29rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}
		.r {
			font-size: 24rpx;
			color: #ffffff;
		}
	}
	.bottom {
		width: 686rpx;
		height: 350rpx;
		background: #ffffff;
		box-shadow: 0rpx 7rpx 10rpx 0rpx rgba(0, 83, 62, 0.05);
		border-radius: 20rpx;
		overflow: hidden;
		.b_top {
			margin-left: 32rpx;
			position: relative;
			.shang {
				padding-top: 36rpx;
				font-size: 40rpx;
				font-weight: bold;
				color: #1c274c;
				display: flex;
				align-items: center;
				.vip {
					width: 127rpx;
					height: 35rpx;
					background: url(/static/vipBg.png) no-repeat;
					background-size: cover;
					font-size: 22rpx;
					font-weight: 900;
					color: #292439;
					position: relative;
					margin-left: 20rpx;
					font-weight: bold;
					text {
						line-height: 35rpx;
						position: absolute;
						right: 10rpx;
					}
				}
			}
			.xia {
				display: flex;
				align-items: center;
				margin-top: 18rpx;
				.btn {
					padding: 0 10rpx;
					height: 38rpx;
					border-radius: 10rpx;
					border: 1rpx solid #8d93a5;
					font-size: 20rpx;
					color: #8d93a5;
					line-height: 38rpx;
					text-align: center;
					margin-right: 20rpx;
				}
			}
			.detailsBg2 {
				width: 243rpx;
				height: 226rpx;
				position: absolute;
				right: 0;
				top: 0;
			}
		}
		.b_cen {
			width: 622rpx;
			height: 150rpx;
			background: #f8f9fb;
			border-radius: 20rpx;
			margin: 40rpx auto 30rpx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			justify-content: space-around;
			.box {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 24rpx;
				color: #666666;
				.num {
					font-size: 36rpx;
					font-weight: 900;
					color: #1c274c;
				}
				.red {
					color: #e91919;
				}
			}
		}
		.b_bot {
			width: 622rpx;
			height: 100rpx;
			background: linear-gradient(238deg, #3e353d 0%, #292439 100%);
			border-radius: 20rpx;
			margin: 0 auto;
			position: relative;
			top: 216rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0 40rpx;
			color: #f4c889;
			.l {
				font-size: 28rpx;
				font-weight: bold;
				display: flex;
				align-items: center;
				image {
					width: 44rpx;
					height: 34rpx;
					margin-right: 18rpx;
				}
			}
			.r {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				image {
					width: 8rpx;
					height: 14rpx;
					margin-left: 12rpx;
				}
			}
		}
	}
}
.flow_path_box{
	width: 686rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	margin: 20rpx auto 30rpx;
	padding: 32rpx;
	box-sizing: border-box;
	.top {
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.l {
			display: flex;
			align-items: center;
			color: #1C274C;
			font-weight: bold;
			image {
				width: 29rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}
		.r {
			font-size: 24rpx;
			color: #00CE9B;
			image{
				width: 12rpx;
				height: 14rpx;
				margin: 0 18rpx;
			}
		}
	}
	.bottom{
		width: 622rpx;
		background: #F0FCF9;
		border-radius: 20rpx;
		margin-top: 32rpx;
		padding: 0 30rpx 40rpx;
		box-sizing: border-box;
		overflow: hidden;
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 40rpx;
			.l{
				display: flex;
				.text{
					display: flex;
					flex-direction: column;
					text:first-child{
						font-size: 26rpx;
						font-weight: 600;
						color: #1C274C;
					}
					text:last-child{
						font-size: 20rpx;
						font-weight: 400;
						color: #1C274C;
						margin-top: 7rpx;
					}
				}
				image{
					width: 46rpx;
					height: 46rpx;
					margin-right: 15rpx;
				}
			}
			.number{
				font-size: 50rpx;
				font-weight: 900;
				color: rgba(0,206,155,0.06);
			}
		}
	}
}
.details_box{
	width: 686rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	margin: 30rpx auto 0;
	padding: 32rpx;
	box-sizing: border-box;
	image{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}
	.top {
		font-size: 30rpx;
		color: #1C274C;
		font-weight: bold;
		margin-bottom: 30rpx;
	}
	.bottom{
		width: 622rpx;
	}
}
.details_box1{
	width: 686rpx;
	background: #F0FCF9;
	border-radius: 20rpx;
	margin: 30rpx auto 0;
	padding: 32rpx;
	box-sizing: border-box;
	image{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}
	.top {
		font-size: 30rpx;
		color: #1C274C;
		font-weight: bold;
		margin-bottom: 30rpx;
	}
	.bottom{
		width: 622rpx;
	}
}
.bottom_btn{
	width: 750rpx;
	height: 190rpx;
	background: #FFFFFF;
	box-shadow: inset 0rpx 1rpx 0rpx 0rpx #EBEBEB;
	overflow: hidden;
	position: fixed;
	bottom: 0;
	.btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 686rpx;
		height: 96rpx;
		background: #00CE9B;
		border-radius: 48rpx;
		margin: 20rpx auto 0;
		font-size: 28rpx;
		font-weight: 500;
		color: #FFFFFF;
	}
}
</style>